<template>
  <div>
    <!-- 步骤条 -->
    <h-row>
      <div>
        <h-steps
          :current="$store.getters['components/currentRegister']"
          processIcon="ios-cloud-download"
          waitIcon="more"
          style="margin-bottom: 12px"
        >
          <h-step
            title="输入信息"
            content="请输入客户基本信息"
            icon="android-list"
          ></h-step>
          <h-step
            title="添加银行卡"
            content="请输入银行卡号"
            icon="card"
          ></h-step>
          <h-step
            title="风险选择"
            content="请选择风险偏好"
            icon="alert-circled"
          ></h-step>
          <h-step
            title="客户信息确认"
            content="请确认客户信息是否正确"
            icon="t-b-account"
          ></h-step>
          <h-step
            title="开户成功"
            content="完成开户流程"
            icon="checkmark-round"
          ></h-step>
        </h-steps>
      </div>
    </h-row>
    <!-- 具体内容 -->
    <h-row>
      <h-col>
        <component
          class="animate__animated animate__fadeInRight card"
          :is="
            $store.getters['components/currentRegister'] === 0
              ? 'enterUserInfo'
              : $store.getters['components/currentRegister'] === 1
              ? 'enterBankCard'
              : $store.getters['components/currentRegister'] === 2
              ? 'enterRiskAssessment'
              : $store.getters['components/currentRegister'] === 3
              ? 'showInfo'
              : ''
          "
        ></component>
      </h-col>
    </h-row>
    <h-row
      v-show="$store.getters['components/currentRegister'] === 4"
      class="animate__animated animate__fadeInRight"
    >
      <div class="centered">
        <h-circle :percent="100" stroke-color="#298DFF" style="display: block">
          <h-icon name="right" size="90" style="color: #298dff"></h-icon>
        </h-circle>
      </div>
      <div class="centered">
        <h1>开户成功!</h1>
      </div>
      <div class="centered">
        <h-button type="primary" @click="finish">完成</h-button>
      </div>
    </h-row>
  </div>
</template>

<script>
export default {
  components: {
    enterUserInfo: () => import("@/components/user/enterUserInfo.vue"),
    enterBankCard: () => import("@/components/user/enterBankCard.vue"),
    enterRiskAssessment: () =>
      import("@/components/user/enterRiskAssessments.vue"),
    showInfo: () => import("@/components/user/showInfo.vue"),
  },
  data() {
    return {};
  },
  methods: {
    finish() {
      this.$store.commit("user/clear");
      this.$store.commit("components/incrementCurrentRegister");
    },
  },
};
</script>

<style  scoped>
.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5vh;
}
.card {
  margin-top: 5vh;
  padding: 3vh;
  border-radius: 6px;
}

/* .card:hover {
  box-shadow: 2px 2px 5px #c1c1c1, -2px -2px 5px #c1c1c1;
  transition: all 0.3s ease;
} */
</style>